<template>
	<view class="pay-box">
		<view class="pay-item">
			<view class="item" v-for="(item,index) in paylist" @click="selecetPay(index)">
				<view class="left">
					<u-icon :name="item.icon" color="#45bc1b" size="40"></u-icon>
					<text>{{$t(item.name)}}</text>
				</view>
				<view class="right">
					<label class="radio">
						<radio style="transform:scale(0.9)" :checked="selecet_index==index" color="#45bc1b" />
					</label>
				</view>
			</view>
		</view>

		<view class="bottom-button" :style="{direction:i18nLocale=='ug'?'ltr':''}">
			<view class="shre-left">
				<view class="price-box">
					<view class="price">￥<text style="font-weight: bold;">{{price}}</text> </view>
				</view>
			</view>
			<view class="share-right" @click="changePay">
				{{$t('Pay')}}
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getorderone,
		wePay,
		cashPay
	} from '@/api/all.js';
	var jweixin = require('jweixin-module');
	import jwx from '@/utils/jwx.js'
	export default {
		data() {
			return {
				price: 0,
				id: 0,
				selecet_index: 0,
				paylist: [{
					name: 'WeChatPay',
					icon: 'weixin-circle-fill'
				}, {
					name: 'PayCash',
					icon: 'rmb-circle-fill'
				}]
			};
		},
		computed: {
			i18nLocale() {
				return this.$i18n.locale;
			},

		},
		onLoad(e) {
			if (e.id) {
				this.getorderOne(e.id);
			}
		},
		methods: {
			selecetPay(index) {
				this.selecet_index = index;
			},
			getorderOne(id) {
				let that = this;
				getorderone({
					id: id
				}).then((res) => {
					if (res.code == 200) {
						let data = res.body.data;
						that.price = data.fee;
						that.id = data.id;
					}

				})
			},
			//点击微信支付
			changePay() {
				if (this.selecet_index == 0) {
					this.wechatpay()
				} else {
					this.cashpay();
				}
			},
			//现金支付
			cashpay() {
				cashPay({
					order_id: this.id
				}).then((res => {
					if (res.code == 200) {
						console.log(res, '++++')
					}
				}))
			},
			//选择微信支付
			wechatpay() {
				//微信支付
				if (!jwx.isWechat) {
					alert('请微信浏览器中打开');
					return;
				}
				let that = this;
				wePay({
					order_id: this.id
				}).then((res) => {
					if (res.code == 200) {
						let data = res.body.we_param;
						that.WXPay(data);
					} else {
						alert(res)
					}
				})
			},
			//微信支付
			WXPay(data) {
				let that = this;
				jwx.initJssdk();
				jweixin.ready(function() {
					jweixin.chooseWXPay({
						timestamp: data.timestamp, // 
						nonceStr: data.nonceStr, // 支付签名随机串，不长于 32 位  
						package: data.package, // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=\*\*\*）  
						signType: data.signType, // 签名方式，默认为'SHA1'，使用新版支付需传入'MD5'  
						paySign: data.paySign, // 支付签名  
						success: function(res) {
							// console.log(res);
							that.$store.commit('setCurrent', 1);
							uni.reLaunch({
								url: '/pages/index/index'
							});
						},
						fail: function(res) {
							alert(res, '++nopay++')
							console.log(res, '++++')
						},

					});
				});
			},


		}
	}
</script>

<style lang="scss" scoped>
	.pay-box {
		width: 100%;
		height: 100%;
		box-sizing: border-box;

		.pay-item {
			width: 100%;
			box-sizing: border-box;
			padding: 20rpx $uni-spacing-padding-sm;


			.item {
				width: 100%;
				box-sizing: border-box;
				padding: 50rpx $uni-spacing-padding-sm;
				border-radius: $uni-border-radius-lg;
				background-color: $uni-bg-color-box;
				margin-bottom: 20rpx;

				box-shadow: $uni-bg-shadow;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.left {
					display: flex;
					align-items: center;

					text {
						padding: 0rpx 20rpx;
						color: $uni-color-title;
						font-size: $uni-font-size-lg;
					}
				}
			}
		}

		.bottom-button {
			width: 92%;
			height: 100rpx;
			left: 4%;
			position: fixed;
			bottom: 4%;
			display: flex;
			justify-content: space-between;
			align-items: center;
			border-radius: 50rpx;
			background-color: rgba(51, 51, 51, 1);

			.shre-left {
				display: flex;
				align-items: center;
				box-sizing: border-box;
				padding-left: 20rpx;

				.icon-box {
					position: relative;

					.number {
						position: absolute;
						top: 0%;
						right: 0%;
						width: 40rpx;
						height: 40rpx;
						border-radius: 100%;
						background-color: $uni-color-topic;
						color: #fff;
						display: flex;
						justify-content: center;
						align-items: center;
						font-size: $uni-font-size-sm1;
						border: 4rpx solid #333333;
					}
				}

				.price-box {
					display: flex;
					flex-direction: column;
					justify-content: space-between;

					.price {
						color: #fff;
						font-size: 38rpx;
						font-weight: 300;
					}

					.move-price {
						color: $uni-text-color-grey;
						font-size: $uni-font-size-paragraph;
					}
				}
			}

			.share-right {
				height: 100%;
				background-color: $uni-color-topic;
				border-radius: 0rpx 50rpx 50rpx 0rpx;
				color: #fff;
				display: flex;
				justify-content: center;
				align-items: center;
				padding: 0rpx 60rpx;
				box-sizing: border-box;
				font-size: 38rpx;
				// font-weight: 550;
			}

		}
	}
</style>